<template>
	<section class="app-container">
		<div style="width:100%">
			<el-row :gutter="20">
				<el-col :xs="0" :sm="12">
					<section class="login-left">
						<el-image style="width: 630px; height: 540px" :preview-src-list="showList" :src="bannerUrl"></el-image>
					</section>
				</el-col>
				<el-col :xs="24" :sm="12">
					<section class="login-right">
						<LoginForm />
					</section>
				</el-col>
			</el-row>
		</div>
    <footer>
      <span>联系站长</span>
      <span>Author.GuoMing</span>
      <span>copyright 湘ICP备XXXXX号</span>
      <span>E-mail:2994435150@qq.com</span>
    </footer>
	</section>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import LoginForm from './modules/LoginForm.vue';
export default defineComponent({
	name: 'login-layout-page',
	components: {
		LoginForm,
	},
	setup() {
		const state = reactive({
			bannerUrl: '/img/loginBanner.png',
			showList: ['/img/loginBanner.png'],
			show: true,
		});
		return {
			...toRefs(state),
		};
	},
});
</script>
<style lang="scss" scoped>
.app-container {
	height: 100%;
	align-items: center;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
	background: #fff;
	// display: flex;
	// flex-direction: row;
	// align-items: center;
	// justify-content: space-between;
	// justify-content: space-around;
	// align-items: center;
	.login-left {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.login-right {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
  footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    span{
      color: #87888A;
      font-size: 12px;
      line-height: 14px;
    }
  }
}
</style>
